<template>
  <view class="page">
    <!-- <div class="top-block">
      <div class="row title">{{ meal.name }}</div>
      <div class="row color">
        ￥<span class="light">{{ meal.meal_price.toFixed(2) }}</span
        >低至￥{{ (meal.meal_price / meal.meal_period).toFixed(2) }}/月
      </div>
      <div class="row">有效期：{{ meal.meal_period }}个月</div>
      <div class="row">套餐包含：{{ meal.call_mins }}分钟+{{ meal.flow ? meal.flow + 'MB' : '无限流量' }}/月</div>
    </div> -->

    <div class="tips-wrap">
      <div class="title">注意事项</div>
      <div class="row">原套餐未失效前购买该套餐，该套餐将在原套餐到期后生效。</div>
      <div class="row">生效方式：<span class="color">立即生效</span></div>
      <div class="row">支付方式：<span class="color">微信支付</span></div>
      <div class="row">请确认充值信息：</div>
      <div class="row">
        <span class="color">业务号码：{{ info.business_code }}</span>
      </div>
      <div class="row">
        <span class="color">ICCID：{{ info.iccid }}</span>
      </div>
    </div>

    <div v-if="meal_id && !info.card_status" class="input-wrap" :class="[light]">
      <input class="input" @focus="light = 'light'" @blur="light = ''" @input="mobile = $event.detail.value" placeholder="请填写您的手机号" />
    </div>

    <button class="btn" type="primary" @click="payment">立即支付</button>
  </view>
</template>

<script>
import uniCopy from '@/lib/js/utils/uni-copy.js';
export default {
  data() {
    return {
      light: '',

      mobile: '',
      id: this.$route.query.cid,
      meal_id: this.$route.query.mid,
      package_id: this.$route.query.pid,

      info: {},
      meal: {},
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const res = await this.$app.http(`/card/getInfo`, {
        id: this.id,
      });
      if (res.data.id) {
        this.info = res.data;

        this.meal = this.info.meals.find((e) => e.meal_id == this.meal_id).meal;
      } else {
        this.$app.toast('找不到卡片信息');
      }
    },
    async payment() {
      const res = await this.$app.http('payment/order', {
        card_id: this.id,
        meal_id: this.meal_id,
        package_id: this.package_id,
        openid: this.$app.getData('openid'),
        mobile: this.mobile,
      });

      WeixinJSBridge.invoke('getBrandWCPayRequest', res.data, (res) => {
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (this.meal_id) {
            if (this.info.operator === 1) {
              // 移动
              uni.showModal({
                title: '支付成功',
                content: `实名校验码为\n${this.info.password}`,
                confirmText: '复制并前往移动实名认证',
                showCancel: false,
                success: (res) => {
                  if (res.confirm) {
                    uniCopy({
                      content: this.info.password,
                      success: () => {
                        this.$app.goPage('https://ebuy.gd.chinamobile.com/estorePortal/auth/iotCheck.html');
                      },
                    });
                  }
                },
              });
            } else if (this.info.operator === 2) {
              // 联通
              uni.showModal({
                title: '支付成功',
                confirmText: '前往联通实名认证',
                showCancel: false,
                success: (res) => {
                  if (res.confirm) {
                    uni.previewImage({
                      urls: ['/static/unicom_qrcode.png'],
                    });
                  }
                },
              });
            }
          } else {
            uni.showModal({
              title: '支付成功',
              confirmText: '返回',
              showCancel: false,
              success: (res) => {
                this.$app.goPage('/pages/mycard/index');
              },
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .color {
    color: $text-color-3;
  }

  .top-block {
    padding: 20rpx;
    border-bottom: 20rpx solid #efefef;

    .row {
      padding: 5rpx 10rpx;

      &.title {
        font-weight: 700;
        font-size: $font-l;
      }

      .light {
        font-size: $font-xxl;
        margin: 0 8rpx;
      }
    }
  }

  .tips-wrap {
    padding: 20rpx;

    .title {
      font-size: $font-l;
      margin: 20rpx 10rpx;
      padding: 0rpx 20rpx;
      line-height: 1;
      font-weight: 700;
      border-left: 8rpx solid $text-color-3;
    }

    .row {
      padding: 5rpx 10rpx;
      color: $text-color-5;
    }
  }

  .input-wrap {
    margin: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 10rpx;
    z-index: 1;
    position: relative;
    border: 1px solid #cecece;
    transition: all 0.3s;

    .input {
      border-radius: 10rpx;
      padding: 10px 20px;
    }

    &.light {
      border: 1px solid $text-color-3;
    }
  }

  .btn {
    margin: 100rpx 40rpx 40rpx;
    padding: 10rpx;
    font-size: $font-l;
  }
}
</style>
